<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style type="text/css">
        .faded{
            height: 50px;
            background-color: red;
            padding: 10px;
            margin:10px;
        }

    </style>
</head>
<body>
<div class="faded"></div>
<button id="fadedoutid">点击淡出</button>
<button id="fadedinid">点击淡入</button>
<button id="fadedid">点击淡入/淡出</button>
<div>
    <button id="button" style="height: 50px">鼠标移入展开，移出收起，默认展开</button>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>武汉</li>
    </ul>
</div>

<script type="text/javascript">
    $(function () {
        $("#fadedoutid").click(function () {
            $(".faded").fadeOut(1000);
        });
        $("#fadedinid").click(function () {
            $(".faded").fadeIn(1000);
        });
        $("#fadedid").click(function(){
            $(".faded").fadeToggle(1000);
        });
        $("#button").mouseleave(function(){
            $("ul").slideUp(1000);
        });
        $("#button").mouseenter(function(){
            $("ul").slideDown(1000);
        });
    })
</script>
</body>
</html>